<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
</head>
<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-treeview/bootstrap-treeview.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-treeview/bootstrap-treeview.min.css}">
<script type="text/javascript" th:src="@{/js/bootStrap-addTabs/bootstrap.addtabs.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootStrap-addTabs/bootstrap.addtabs.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-table/bootstrap-table.min.css}">
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-fileinput/css/fileinput.css}">

<script type="text/javascript" th:src="@{/js/bootstrap-bootbox/bootbox.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-fileinput/js/fileinput.min.js}"></script>
<script th:src="@{/js/bootstrap-fileinput/js/locales/zh.js}"></script>

<body>
<!-- 修改模态框（Modal） -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel1">修改商品</h4>
            </div>
            <div class="modal-body">
                <form id="myForm1">
                    <input type="hidden" class="form-control" name="product_id"id="product_id"  >
                    商品名称：<input type="text" class="form-control" name="product_name"id="product_name"   placeholder="商品名称">
                    商品价格：  <input type="text" class="form-control" name="product_price" id="product_price" placeholder="商品价格">
                    商品类型：<select class="selectpicker form-control"
                                 data-live-search="true" name="typename" id="addid"></select>                    商品数量：<input type="text" class="form-control" name="product_num" id="product_num" placeholder="商品数量">
                    商品描述：<input type="text" class="form-control" name="product_description" id="product_description" placeholder="商品描述">
                    <input type="hidden" class="form-control" name="product_imgurl" id="product_imgurl" placeholder="商品描述">
                    商品图片：<input id="file-Portrait" name="img" class="form-control" type="file">
                </form>
            </div>
            <!--  ====================================================   -->

            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <button class="btn btn-primary" type="button" onclick="sub()">确认修改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 修改模态框（Modal） -->
<div class="modal fade" id="myModal12" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel12">添加商品</h4>
            </div>
            <div class="modal-body">
                <form id="myForm12">
                    <input type="hidden" class="form-control" name="id"  >
                    商品名称：<input type="text" class="form-control" name="s_name"  placeholder="商品名称">
                    商品图片：<input id="file-Portrait1" name="img" class="form-control" type="file">
                    商品类型：<input type="text" class="form-control" name="s_type" placeholder="商品类型">
                    商品颜色：<input type="text" class="form-control" name="s_color"  placeholder="商品颜色">
                    <input type="hidden" class="form-control"  name="sid" id="sid"  >
                    商品价格：<input type="text" class="form-control" name="product_price"  placeholder="商品价格">
                    商品描述：<input type="text" class="form-control" name="product_description"  placeholder="商品描述">
                </form>
            </div>
            <!--  ====================================================   -->

            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <button class="btn btn-primary" type="button" onclick="subadd()">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--搜索 -->
<div id="tb">

    商品名称：<input type="text" class="form-control"  id="name" name="product_name" placeholder="请输入商品名称">
    <button type="button" onclick="sousuo()" class="btn btn-info">搜索</button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <button type="button" onclick="tongbu()" class="btn btn-primary">同步数据</button>
</div>
<!-- 查询列表-->
<table id="myTable"></table>

</body>

<script >

    function tongbu() {
        $.ajax({
            url:"tong",
            success:function(){
                bootbox.alert({
                    size: "small",
                    message: "数据同步成功",
                    callback: function(){
                        $('#myTable').bootstrapTable('refresh');//刷新表格

                        /* your callback code */ }
                })
            }
        })
    }
    function sousuo(){
        $("#myTable").bootstrapTable("refresh", {
            "query": {
                product_name: $("#name").val(),
                maxprice: $("#maxprice").val(),
                minprice: $("#minprice").val(),


            }
        });
    }

    $("#myTable").bootstrapTable({
        url:"getListPro",
        columns:[
            {field:"xuan",checkbox:true},
            {field:"product_id",title:"编号"},
            {field:"product_name",title:"商品名称"},
            {field:"product_price",title:"商品价格"},
            {field:"typename",title:"商品类型"},
            {field:"product_imgurl",title:"商品图片",formatter:function(value,row,index){
                    return "<img width='50px' height='50px' src='"+value+"'>";
                }},
            {field:"product_num",title:"商品数量"},
            {field:"product_description",title:"商品描述"},
            {field:"cxz",title:"操作",formatter:function(value,row){
                    var str='<button class="btn btn-info" onclick="del('+row.product_id+')">删除</button>';
                    var str2='<button class="btn btn-primary" onclick="getProId('+row.product_id+')" data-toggle="modal" data-target="#myModal1">修改商品</button>';
                    var str3='<button class="btn btn-primary" onclick="addtype('+row.product_id+')" data-toggle="modal" data-target="#myModal12">添加类型</button>';
                    return str+"   "+str2+"  "+str3;
                }},
        ],
        pagination:true,
        pageSize:10,
        pageList:[2,4,6,8,10],
        sidePagination: "client",
        toolbar:"#tb",
    })

    function addtype(product_id) {
        $("#sid").val(product_id);
    }
    function subadd() {
        $.ajax({
            url:"addType",
            type:"post",
            data:$("#myForm12").serialize(),
            success:function(){
                $('#myTable').bootstrapTable('refresh');//刷新表格
                $("#myModal12").modal('hide');

            },error:function(){
                $('#myTable').bootstrapTable('refresh');//刷新表格
                $("#myModal12").modal('hide');
            }
        })
    }
   $(function(){
       getType()
   })
    function getType(){
        $.ajax({
            url:"getType",
            dataType : "json",
            success: function(data) {
                var opts = "";
                for( var i = 0 ; i < data.length; i++ ){
                    //id          类型
                    opts += "<option  value='"+data[i].id+"'>"+data[i].typename+"</option>";
                }
                // 查询界面
                $("#addid").append(opts);
            }
        });
    }
    //图片上传
    $('#file-Portrait1').fileinput({
        language: 'zh', //设置语言
        uploadUrl: "upload123", //上传的地址
        allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀,
        maxFileCount: 100,
        enctype: 'multipart/form-data',
        showUpload: true, //是否显示上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    });
    //修改回显
    function getProId(product_id){
        $.ajax({
            url:"getById",
            data:{id:product_id},
            type:"post",
            dataType:"json",
            success:function(data){
                $("#product_id").val(data.product_id);
                $("#product_name").val(data.product_name);
                $("#product_price").val(data.product_price);
                $("#addid").val(data.tid);
                $("#product_num").val(data.product_num);
                $("#product_description").val(data.product_description);
                $("#product_imgurl").val(data.product_imgurl);
                $("#file-Portrait").fileinput('refresh', {
                    initialPreview: "<img src="+data.product_imgurl+" height='180px' width='150px' class='file-preview-image'>",
                });
            }
        })
    }
    //修改
    function sub(){
        $.ajax({
            url:"updPro",
            type:"post",
            data:$("#myForm1").serialize(),
            success:function(){
                $('#myTable').bootstrapTable('refresh');//刷新表格
                $("#myModal1").modal('hide');

            },error:function(){
                $('#myTable').bootstrapTable('refresh');//刷新表格
                $("#myModal1").modal('hide');
            }
        })
    }
    //图片上传
    $('#file-Portrait').fileinput({
        language: 'zh', //设置语言
        uploadUrl: "upload", //上传的地址
        allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀,
        maxFileCount: 100,
        enctype: 'multipart/form-data',
        showUpload: true, //是否显示上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

    });
    //删除
    function del(product_id){
        $.ajax({
            url:"delPro",
            data:{id:product_id},
            success:function(){
                //bootbox.confirm("成功", "info")
                $("#myTable").bootstrapTable('refresh');
            }
        })
    }
</script>
</html>